<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body onload="init()">
    <center>
        <h1>Brazo robótico</h1>
        <canvas id="Canvas1" width="640" height="480">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
        <script type="text/javascript" src="libGrafica.js"></script>
        <script type="text/javascript">
        	var angulo, limits;
        	var F=0,H=1,E=2,S=3,B=4;
        	
        	function init() {
        		initLG(document.getElementById("Canvas1").getContext("2d"));
        		//setCoordinatesLG(640/2,480/2,100,100);
        		angulo = [0,0,0,0,0];
        		limits = [[0,30],[-30,30],[0,120],[-180,120],[-360,360]];
        		draw();
        	}
        	
        	//signo=1 si dedo abajo; signo=-1 si dedo arriba
        	function finger(signo) {
        		pushLG();
        			rotz(signo*angulo[F]);
        			transladarLG(3,0,0);
        			escalarLG(3,1,1);
        			wireCubeLG();        			
        		popLG();        		
        	}     	
        	
        	function hand() {
        		pushLG();
        			rotz(angulo[H]);
		    		pushLG();
		    			transladarLG(3,0,0);
		    			escalarLG(3,3,1);        			
		    			wireCubeLG();
		    		popLG();
		    		pushLG();
		    			transladarLG(6,2,0);
		    			finger(-1);
		    		popLG();
		    		pushLG();
		    			transladarLG(6,-2,0);
		    			finger(1);
		    		popLG();
		    	popLG();
        	}
        	
        	function elbow() {
        		pushLG();
        			rotz(angulo[E]);
		    		pushLG();
		    			transladarLG(7,0,0);
		    			escalarLG(7,3,1);        			
		    			wireCubeLG();
		    		popLG();
		    		pushLG();
		    			transladarLG(14,0,0);
		    			hand();
		    		popLG();		    		
		    	popLG();
        	}
        	
        	function shoulder() {
        		pushLG();
        			rotz(angulo[S]);
		    		pushLG();
		    			transladarLG(9,0,0);
		    			escalarLG(9,3,1);        			
		    			wireCubeLG();
		    		popLG();
		    		pushLG();
		    			transladarLG(18,0,0);
		    			elbow();
		    		popLG();		    		
		    	popLG();
        	}
        	
        	function body() {
        		pushLG();
        			roty(angulo[B]);
		    		pushLG();
		    			transladarLG(0,15,0);
		    			escalarLG(3,15,3);        			
		    			wireCubeLG();
		    		popLG();
		    		pushLG();
		    			transladarLG(3,27,0);
		    			rotx(3.1416);
		    			shoulder();
		    		popLG();		    		
		    	popLG();
        	}
        	
        	function draw() {
        		context.fillStyle = "rgb(255,255,255)";
        		context.fillRect(0,0,640,480);        		
	        	context.strokeStyle = "rgb(255,0,0)";
	        	context.lineWidth = 1;
	        	pushLG();
	        		transladarLG(640/2,480/2,0);
	        		escalarLG(5,-5,5);
	        		rotx(0.4);
	        		body();
	        	popLG();        		
        	} 
        
        	function add(delta) {
        		var parte = document.getElementById('Partes').value;
        		var x = angulo[parte] + delta;
        		var l_inf = limits[parte][0]*Math.PI/180;
        		var l_sup = limits[parte][1]*Math.PI/180;
        		if (x>=l_inf && x<=l_sup)
        			angulo[parte] = x;
        		draw();
        	}
        </script>
        <br />
        <select id="Partes"> 
        	<option value="0">Finger</option>
        	<option value="1">Hand</option>
        	<option value="2">Elbow</option>
        	<option value="3">Shoulder</option>
        	<option value="4">Body</option>
        </select>
        <input type="button" id="cmdInc" value="Increase" onclick="add(0.2)" />
        <input type="button" id="cmdDec" value="Decrease" onclick="add(-0.2)" />
    </center>
  </body>
</html>
